<div  style="padding-top: 30px;">
    <div style="align-content: center; width: 100%">
        <table class="data_table" border="1px">
            <caption style="font-size: medium; margin-bottom: 10px">"活"信息统计汇总</caption>
            <tr>
                <td>今日发布的活</td>
                <td>今日成交的活</td>
                <td>累计发布的活</td>
                <td>累计成交的活 </td>
            </tr>
            <tr>
                <td><{$today_publish}></td>
                <td><{$today_finish}></td>
                <td><{$total_mission}></td>
                <td><{$total_finish}></td>
            </tr>
        </table>
    </div>

    <div style="text-align: center;width: 100%;margin-top: 30px">
        开始日期：<input id="start_mission" class="easyui-datebox" ></input>&nbsp;&nbsp;&nbsp;&nbsp;
        结束日期：<input id="end_mission" class="easyui-datebox" ></input>&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" onclick="show_mission(1)" value="查询">
    </div>
    <div style="text-align: center;width: 100%">
        <div id="data_line_huo" style="height:400px;width: 80%;margin: 20px auto"></div>
    </div>
    <!-- ECharts单文件引入 -->
    <script src="__STATIC__/js/echarts/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: '__STATIC__/js/echarts'
            }
        });
        function show_mission(val){
            if(val==1){
                var start = $("#start_mission").datebox('getValue');
                var end = $("#end_mission").datebox('getValue');
            }else{
                var start = '';
                var end = '';
            }



            // 使用
            require(
                    [
                        'echarts',
                        'echarts/theme/helianthus',
                        'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
                    ],
                    function (ec) {
                        // 基于准备好的dom，初始化echarts图表
                        var myChart = ec.init(document.getElementById('data_line_huo'));

                        myChart.showLoading({
                            text: "正在拼命为您加载数据~~"
                        });

                        var option = {
                            title : {
                                text: '活-信息统计',
                                subtext: ''
                            },
                            tooltip : {
                                trigger: 'axis'
                            },
                            legend: {
                                data:[]
                            },
                            toolbox: {
                                show : true,
                                feature : {
                                    mark : {show: false},
                                    dataView : {show: false, readOnly: false},
                                    magicType : {show: false, type: ['line', 'bar']},
                                    restore : {show: true},
                                    saveAsImage : {show: true}
                                }
                            },
                            dataZoom : {
                                show : true,
                                realtime: true,
                                start : 50,
                                end : 100,
                                zoomLock:false
                            },
                            calculable : true,
                            xAxis : [
                                {
                                    type : 'category',
                                    boundaryGap : false,
                                    data : []
                                }
                            ],
                            yAxis : [
                                {
                                    type : 'value',
                                    axisLabel : {
                                        formatter: '{value} 个'
                                    }
                                }
                            ],
                            series : []
                        };
                        //通过Ajax获取数据
                        $.ajax({
                            type: "post",
                            async: false, //同步执行
                            url: "<{:U('Data/missionActive')}>",
                            dataType: "json", //返回数据形式为json
                            data:{
                                start: start,
                                end:end
                            },
                            success: function (result) {
                                //alert(result.legend);
                                // if (result) {
                                //将返回的category和series对象赋值给options对象内的category和series
                                //因为xAxis是一个数组 这里需要是xAxis[i]的形式
                                option.xAxis[0].data = result.xdata;
                                option.series = result.series;
                                option.legend.data = result.legend;
                                myChart.hideLoading();
                                myChart.setOption(option);
                                // }
                            },
                            error: function (errorMsg) {
                                alert("亲~数据加载失败请刷新重试~~");
                            }
                        });

                        // 为echarts对象加载数据
                        //myChart.setOption(option);
                    }
            );
        }
        show_mission(0);
    </script>
</div>